<template>
	<div>
		<div class="main_operation">
			<div class="operation_left">
				<a-button class="mr10" type="primary" @click="addBtn">添加</a-button>
				<!-- <a-button class="mr10" type="danger">批量删除</a-button> -->
			</div>
			<div class="operation_right">
        <a-input-group style="width:500px;" compact>
          <a-select style="width:30%;" v-model="inputType">
            <a-select-option :value="1">分组名称</a-select-option>
            <a-select-option :value="2">单位名称</a-select-option>
          </a-select>
          <a-input-search style="width:70%;" @search="onSearch" :placeholder="isInputType" enterButton="查询" />
        </a-input-group>
			</div>
		</div>
		<div class="main">
				<!-- :rowSelection="{ fixed: true, selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" -->
		  <a-table :pagination="false" :loading="tableLoad" :columns="Fields" :dataSource="dataLists.data" :rowKey="record => record.id"
		    :scroll="{x: 1000, y: 500 }">
		    <template slot="action" slot-scope="text, record">
		      <a-button size="small" class="mr5" type="primary" @click="editBtn(record)">编辑</a-button>
		      <a-button size="small" type="danger" @click="delBtn(record)">删除</a-button>
		    </template>
		  </a-table>
		  <div class="pageBox">
		    <a-pagination :total="dataLists.total" :showTotal="total => `共 ${total} 条数据`" :pageSize="dataLists.per_page"
		      :defaultCurrent="1" @change="pageChange" />
		  </div>
		</div>
    <!-- 添加编辑 -->
    <a-modal :maskClosable="false" :destroyOnClose="true" :title="titleModel" :width="600" v-model="visible"
      :confirmLoading="confirmLoading" @ok="handleOk" @cancel="handleCancel">
      <a-form>
        <a-form-item required label="分组名称:" :label-col="{ md: 5 ,xs: 24 }" :wrapper-col="{ md: 18 ,xs: 24 }">
          <a-input v-model="formItem.name" placeholder="请输入分组名称" />
        </a-form-item>
        <a-form-item required label="单位名称" :label-col="{ md: 5 ,xs: 24 }" :wrapper-col="{ md: 18 ,xs: 24 }">
        	<a-cascader
        		v-model="groupId"
        		:fieldNames="{ label: 'name', value: 'id', children: 'parent' }"
        		@change="groupChange"
        		:options="groupData" placeholder="请选择单位名称" />
        </a-form-item>
        <a-form-item  label="联系人姓名:" :label-col="{ md: 5 ,xs: 24 }" :wrapper-col="{ md: 18 ,xs: 24 }">
          <a-select mode="multiple" v-model="fullName" @change="fullNameChange" placeholder="请选择联系人姓名">
            <a-select-option v-for="item in alarmAllData" :value="item.id" :key="item.id">{{item.name}}</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
	</div>
</template>

<script>
import {
  mapState,
  mapActions
} from 'vuex';
export default {
	name: 'Single',
	data() {
		return {
      inputType: 1,
			/* 通用模块 */
			//列表
			tableLoad: false, //列表loading状态
			formList: { //列表信息
			  page: 1
			},
			selectedRowKeys: [], //勾选的id
			/* 通用模块end */

			/* 添加编辑 */
			titleModel: '', //标题
			visible: false, //窗口显示隐藏
			confirmLoading: false, //按钮loading状态
			formItem: {
			  name: '',
        company: '',
        full_name: '',
      },
      fullName: [],
			/* 添加编辑end */
      // 分组
      groupId: [],
		};
	},
	computed: {
	  ...mapState({
	    Fields: state => state.alertContactsGroup.Fields,
	    dataLists: state => state.alertContactsGroup.dataLists,
	    requestCode: state => state.alertContactsGroup.requestCode,
      groupData: state => state.group.groupData,
      alarmAllData: state => state.alertContacts.alarmAllData,
      
	  }),
    isInputType(){
      if (this.inputType == 1) {
        return '请输入分组名称'
      } else if (this.inputType == 2) {
        return '请输入单位名称'
      }
    },
	},
	mounted() {
    this.groupAll()
    this.alarmAll()
	  this.changeData()
	},
	methods: {
    /* 通用模块 */
    /* 接口 */
    ...mapActions({
      getLists: 'alertContactsGroup/getLists', //列表
      dataAdd: 'alertContactsGroup/dataAdd', //添加
      dataEdit: 'alertContactsGroup/dataEdit', //编辑
      dataDel: 'alertContactsGroup/dataDel', //删除
      groupAll: 'group/groupAll', //公司分组信息
      alarmAll: 'alertContacts/alarmAll', //报警联系人所有信息

      
      
    }),
    
    // 勾选
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys
    },
    // 重新获取列表数据
    changeData() {
      this.tableLoad = true
      setTimeout(() => {
        this.getLists(this.formList)
        this.tableLoad = false
      }, 800);
    },
    //搜索
    onSearch(val) {
      console.log(val)
      if (this.inputType == '1') {
        this.formList = { //列表信息
          name: val,
          page: 1
        }
      } else if (this.inputType == '2'){
        this.formList = { //列表信息
          company: val,
          page: 1
        }
      } else {
        this.formList = { //列表信息
          company: val,
          page: 1
        }
      }
      this.changeData()
    },
    // 页码
    pageChange(page) {
      this.formList.page = page;
      this.getLists(this.formList)
    },
    /* 通用模块end */

    /* 添加编辑 */
    // 添加
    addBtn() {
      this.titleModel = '添加报警联系人'
      this.formItem = {
        name: '',
        company: '',
        full_name: '',
      }
      this.groupId = []
      this.fullName = []
      this.visible = true
    },
    // 数组反序
    isReverse(val) {
      return val.reverse()
    },
    // 编辑
    editBtn(item) {
      console.log(item);
      this.titleModel = '编辑报警联系人'
      this.groupId = []
      this.fullName = []
      this.formItem.id = item.id
      this.formItem.name = item.name
      this.formItem.company = item.company
      this.formItem.full_name = item.full_name
      this.groupId = item.company_arr

      if(item.full_name != null) {
        let arr = item.full_name.split(",")
        arr = arr.map(Number)
        this.fullName = arr
      }
      this.visible = true
    },
    // 窗口确定
    handleOk() {
      this.confirmLoading = true;
      console.log(this.formItem);
      this.formItem.full_name
      if (this.titleModel == '添加报警联系人') {
        this.formList.page = 1,
        this.dataAdd(this.formItem)
      } else {
        this.dataEdit(this.formItem)
      }
      setTimeout(() => {
        if (this.requestCode === 0) {
          this.visible = false;
          this.changeData()
        }
        this.confirmLoading = false;
      }, 1000);
    },
    // 窗口取消
    handleCancel() {
      this.fullName = []
      this.visible = false
    },
    /* 添加编辑end */
    //联系人选择
    fullNameChange(val) {
      this.formItem.full_name = val.join(',')
    },
    /* 删除 */
    delBtn(item) {
      let _this = this
      this.$confirm({
        title: `您确定要删除 ${item.name} 吗?`,
        content: `删除后将不可恢复,请仔细核对!`,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          _this.dataDel(item.id)
          _this.changeData()
        },
      });
    },
    // 分组选择
    groupChange(value) {
      console.log(value)
    	this.formItem.company = value[value.length-1]
      console.log(this.formItem)
    },
	}
};
</script>

<style></style>
